<template>
  <div id="app">
    <div class="content" id="main"></div>
  </div>
</template>
<script>
import axios from 'axios';
import * as echarts from 'echarts';

// const {resolve} = require('path')
export default {
  name: 'App',
  components: {
  },
  data(){
    return{
      chartDom:null,
      myChart:null,
      option:'',
      categories:{}

    }
  },
 async mounted(){
   this.chartDom = document.getElementById('main');
   this.myChart = echarts.init(this.chartDom);
    let url = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/les-miserables.json'
  //  let url1 = resolve(__dirname,'data.json')
   await axios({
      method:"get",
      url:url,
      params:'',
      headers:{}
    }).then(res=>{


      let  graph = res.data
      // let graph ={
      //   categories:[]
      // }
      //  let  dataObj=JSON.parse(res.data)
      //  let len = dataObj.length
      //  console.log(len);
       
      // for (let i = 0; i < len; i++) {
      //   let flag = dataObj[i].influencer_main_genre
      //   console.log(dataObj[i]);
      //   if(!this.categories[flag]){
      //     graph.categories.push({
      //       'name':dataObj[i].influencer_main_genre
      //     })
      //     this.categories[flag] = true
      //   }
        
      // }
      // dataObj.map(newObj=>{
      //   if(!this.categories[newObj.influencer_main_genre]){
      //     graph.categories.push({
      //       'name':newObj.influencer_main_genre
      //     })
      //     this.categories[newObj.influencer_main_genre] = true
      //   }
       
      // })
      
      this.myChart.hideLoading();
      console.log(graph);
        this.option = {
          tooltip: {},
          legend: [{
              data: graph.categories.map(function (a) {
                  return a.name;
              })
          }],
          series: [
              {
                  name: 'Les Miserables',
                  type: 'graph',
                  layout: 'none',
                  data: graph.nodes,
                  links: graph.links,
                  categories: graph.categories,
                  roam: true,
                  label: {
                      show: true,
                      position: 'right',
                      formatter: '{b}'
                  },
                  labelLayout: {
                      hideOverlap: true
                  },
                  scaleLimit: {
                      min: 0.4,
                      max: 2
                  },
                  lineStyle: {
                      color: 'source',
                      curveness: 0.3
                  }
              }
          ]
        };
    })
    console.log(112);
     this.option && this.myChart.setOption(this.option);
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.content{
  height:100vh;
  background: #f8f8f8;
}
</style>
